<!--
 * @Description: 计算器-交易试算表格
  * @Version: 1.0
 * @Autor: chenwg
 * @Date: 2024-01-16 19:11:31
 * @LastEditors: chenwg
 * @LastEditTime: 2024-01-16 19:11:31
-->
<template>
  <jy-table
    :show-header="false"
    :data="calculatetableData"
    border
    :stripe="false"
    :cell-style="cellStyle"
    class="calculateStyle"
    :loading="calculateLoading"
  >
    <jy-column field="a1" width="140" class-name="bgColor"> </jy-column>
    <jy-column field="a2">
      <template #default="{ row, rowIndex }">
        <!-- <div class="haspercent"> :state="row.a2state"-->
        <jy-input-number
          size="mini"
          v-model="row.a2"
          :min="1"
          :max="365"
          v-if="rowIndex == 1"
          @change="refreshCalculate('reDay')"
        >
          <!-- <span slot="suffix" v-if="row.a2state" @click="clearError(rowIndex)">
            <jy-icon name="Gildata-color-error1"></jy-icon>
          </span> 
          @blur="limitBlur(rowIndex, row.a2)"
          -->
        </jy-input-number>
        <jy-input-number
          size="mini"
          v-model="row.a2"
          v-else-if="rowIndex == 3"
          :min="1"
          :precision="4"
          :step="0.0001"
          :formatter="(value) => `${value}%`"
          :parser="(value) => value.replace('%', '')"
          @change="refreshCalculate('reRate')"
        >
          <!-- <span slot="suffix" v-if="row.a2state" @click="clearError(rowIndex)">
            <jy-icon name="Gildata-color-error1"></jy-icon>
          </span> -->
        </jy-input-number>
        <!-- <span v-show="rowIndex == 3">%</span> -->
        <!-- </div> -->
        <jy-date-picker
          v-model="row.a2"
          v-else-if="rowIndex == 0"
          type="date"
          placeholder="请选择日期"
          showToday
          size="mini"
          :clearable="false"
          value-format="yyyy-MM-dd"
          @change="refreshCalculate('tradeDay')"
        >
        </jy-date-picker>
        <jy-select
          v-else-if="rowIndex == 4"
          v-model="row.a2"
          size="mini"
          @change="refreshCalculate('accrualBasis')"
        >
          <jy-option
            v-for="item in basisOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </jy-option>
        </jy-select>
        <span v-else>{{ row.a2 }}</span>
      </template>
    </jy-column>
    <jy-column field="a3" width="140" class-name="bgColor"></jy-column>
    <jy-column field="a4">
      <template #default="{ row, rowIndex }">
        <jy-date-picker
          @change="refreshCalculate('mSettleDate')"
          size="mini"
          v-model="row.a4"
          v-if="rowIndex == 2"
          type="date"
          placeholder="请选择日期"
          showToday
          :clearable="false"
          value-format="yyyy-MM-dd"
        >
        </jy-date-picker>
        <jy-select
          v-else-if="rowIndex == 0"
          v-model="row.a4"
          size="mini"
          @change="refreshCalculate('settleSpeed')"
        >
          <jy-option
            v-for="item in speedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </jy-option>
        </jy-select>
        <span v-else>{{ row.a4 }}</span>
      </template>
    </jy-column>
  </jy-table>
</template>

<script>
import { formatNumber } from "@/utils/math";
export default {
  components: {},
  props: {
    calculateLoading: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      calculatetableData: [
        {
          a1: "交易日期",
          a2: "",
          a3: "清算速度",
          a4: "T+0",
        },
        {
          a1: "回购天数",
          a2: "",
          a2state: "",
          a3: "实际占款天数",
          a4: "",
        },
        {
          a1: "首次结算日",
          a2: "",
          a3: "到期结算日",
          a4: "",
        },
        {
          a1: "回购利率",
          a2: "",
          a2state: "",
          a3: "券面折算总额(万元)",
          a4: "",
        },
        {
          a1: "计息基准",
          a2: "A/365",
          a3: "",
          a4: "",
        },
        {
          a1: "首次结算金额(元)",
          a2: "",
          a3: "到期结算金额(元)",
          a4: "",
        },
        {
          a1: "回购利息(元)",
          a2: "",
          a3: "",
          a4: "",
        },
      ],
      basisOptions: [
        {
          label: "A/A",
          value: "A/A",
        },
        {
          label: "A/365",
          value: "A/365",
        },
        {
          label: "A/365F",
          value: "A/365F",
        },
        {
          label: "A/360",
          value: "A/360",
        },
      ],
      speedOptions: [
        {
          label: "T+0",
          value: "T+0",
        },
        {
          label: "T+1",
          value: "T+1",
        },
      ],
    };
  },
  computed: {
    calData() {
      let calculate = {
        tradeDay: this.calculatetableData[0].a2,
        settleSpeed: this.calculatetableData[0].a4 == "T+0" ? 0 : 1,
        reDay: this.calculatetableData[1].a2,
        mSettleDate: this.calculatetableData[2].a4,
        reRate: this.calculatetableData[3].a2,
        accrualBasis: this.calculatetableData[4].a2,
      };
      return calculate;
    },
  },
  methods: {
    initCalculate() {
      //
    },
    cellStyle({ column, rowIndex }) {
      if (
        (column.property == "a2" && [0, 1, 3, 4].includes(rowIndex)) ||
        (column.property == "a4" && [0, 2].includes(rowIndex))
      ) {
        return {
          backgroundColor: "#FFFBE6",
        };
      }
    },
    getCalculateData() {
      this.$emit("getData", this.calculatetableData);
    },
    refreshCalculate(type) {
      this.$emit("refreshCalculate", this.calData, type);
    },
    // 校验回购天数
    isValidNumber(value) {
      // 判断是否为正整数
      const isPositiveInteger = /^\d+$/.test(value);
      // 判断数值范围是否在 0 到 365 之间
      const isInRange = value > 0 && value <= 365;
      // 返回校验结果
      return isPositiveInteger && isInRange;
    },
    // 校验回购利率
    isPositiveFloat(value) {
      // 判断是否为正浮点数
      const pattern = /^\d+(\.\d+)?$/;
      return pattern.test(value) && parseFloat(value) > 0;
    },
    clearError(i) {
      this.calculatetableData[i].a2state = "";
      this.calculatetableData[i].a2 = "";
    },
    limitBlur(i, value) {
      this.refreshCalculate();
    },
    setData(cal) {
      // 交易日期/清算速度/回购天数/实际占款天数/首次结算日/到期结算日/回购利率/券面折算总额/计息基准/首次结算金额/到期结算金额/回购利息
      this.calculatetableData[0].a2 = cal.tradeDay
        ? cal.tradeDay.split(" ")[0]
        : "";
      this.calculatetableData[0].a4 = cal.settleSpeed === 0 ? "T+0" : "T+1";
      this.calculatetableData[1].a2 = cal.reDay;
      this.calculatetableData[1].a4 = cal.actualAccrualDays;
      this.calculatetableData[2].a2 = cal.fSettleDate
        ? cal.fSettleDate.split(" ")[0]
        : "";
      this.calculatetableData[2].a4 = cal.mSettleDate
        ? cal.mSettleDate.split(" ")[0]
        : "";
      this.calculatetableData[3].a2 = cal.reRate.toFixed(4);
      this.calculatetableData[3].a4 =
        cal.faceSettleAmount === 0 ? 0 : formatNumber(cal.faceSettleAmount);
      this.calculatetableData[4].a2 = cal.accrualBasis;
      this.calculatetableData[5].a2 =
        cal.fSettleAmount === 0 ? 0 : formatNumber(cal.fSettleAmount);
      this.calculatetableData[5].a4 =
        cal.mSettleAmount === 0 ? 0 : formatNumber(cal.mSettleAmount);
      this.calculatetableData[6].a2 =
        cal.reInterest === 0 ? 0 : formatNumber(cal.reInterest);
      this.calculatetableData[1].a2state = "";
      this.calculatetableData[3].a2state = "";
    },
  },
  mounted() {
    this.initCalculate();
  },
};
</script>

<style lang="less" scoped>
.calculateStyle {
  /deep/ .jy-input,
  .jy-input-number,
  .jy-select {
    width: 70%;
    min-width: 115px;
    .jy-input__suffix {
      cursor: pointer;
    }
  }
  /deep/ .jy-select {
    .jy-input__inner {
      font-family: "微软雅黑", "pingfang sc", Arial, Helvetica, SimSun,
        "Biaodian Pro Sans GB", "Helvetica Neue", "Hiragino Sans GB",
        "Microsoft YaHei", STHeiti, sans-serif !important;
      opacity: 1 !important;
    }
  }
  /deep/.jy-input,
  .jy-input-number {
    .jy-input__inner {
      font-family: NumberFonts;
    }
  }
  /deep/.bgColor {
    background: #eff5ff;
    border-bottom: 1px solid #d3e2ff;
    border-left: 1px solid #d3e2ff;
    border-right: 1px solid #d3e2ff;
    font-weight: 600;
  }
  .haspercent {
    display: flex;
    align-items: center;
    span {
      margin-left: 8px;
    }
  }
}
</style>
